/**
 * 学习目标：条件渲染的三种方式 - 类似v-if
 */
import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = true;

// 1. if else语配合函数的返回值
function loadData() {
  if (isLoading) {
    return <h1>...加载中...</h1>;
  } else {
    return <h2>正常显示</h2>;
  }
}

const divNode = (
  <div>
    {loadData()}

    {/*  2. 三元 */}
    {isLoading ? <h1>...加载中...</h1> : <h2>正常显示</h2>}

    {/*  3. &&  */}
    {isLoading && <h1>...加载中...</h1>}
    {!isLoading && <h2>正常显示</h2>}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
